<template>
  <div class="reset-password-container">
    <div class="reset-box">
      <h2>重置密码</h2>
      
      <!-- 步骤1: 验证用户名和验证码 -->
      <div v-if="step === 1" class="step-content">
        <div class="input-group">
          <input 
            type="text" 
            v-model="username" 
            placeholder="请输入用户名"
          >
          <div class="verify-code-group">
            <input 
              type="text" 
              v-model="verifyCode" 
              placeholder="请输入验证码"
            >
            <button 
              @click="sendVerifyCode" 
              :disabled="cooldown > 0"
            >
              {{ cooldown > 0 ? `${cooldown}s后重试` : '获取验证码' }}
            </button>
          </div>
        </div>
        <button class="submit-btn" @click="verifyUsername">下一步</button>
      </div>

      <!-- 步骤2: 设置新密码 -->
      <div v-if="step === 2" class="step-content">
        <div class="input-group">
          <input 
            type="password" 
            v-model="newPassword" 
            placeholder="请输入新密码"
          >
          <input 
            type="password" 
            v-model="confirmPassword" 
            placeholder="请确认新密码"
          >
        </div>
        <button class="submit-btn" @click="resetPassword">确认重置</button>
      </div>

      <div class="back-to-login">
        <router-link to="/login">返回登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResetPasswordComponent',
  data() {
    return {
      step: 1,
      username: '',
      verifyCode: '',
      correctCode: '',
      newPassword: '',
      confirmPassword: '',
      cooldown: 0
    }
  },
  methods: {
    sendVerifyCode() {
      // 检查用户是否存在
      const users = JSON.parse(localStorage.getItem('users') || '[]')
      const user = users.find(u => u.username === this.username)
      if (!user) {
        alert('用户不存在')
        return
      }

      // 生成6位随机验证码
      this.correctCode = Math.random().toString().slice(-6)
      alert(`验证码是: ${this.correctCode}`) // 实际项目中应该通过邮件或短信发送

      // 开始倒计时
      this.cooldown = 60
      const timer = setInterval(() => {
        this.cooldown--
        if (this.cooldown <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
    verifyUsername() {
      if (!this.username || !this.verifyCode) {
        alert('请填写完整信息')
        return
      }

      if (this.verifyCode !== this.correctCode) {
        alert('验证码错误')
        return
      }

      this.step = 2
    },
    resetPassword() {
      if (!this.newPassword || !this.confirmPassword) {
        alert('请填写完整信息')
        return
      }

      if (this.newPassword !== this.confirmPassword) {
        alert('两次密码输入不一致')
        return
      }

      // 更新用户密码
      const users = JSON.parse(localStorage.getItem('users') || '[]')
      const userIndex = users.findIndex(u => u.username === this.username)
      if (userIndex !== -1) {
        users[userIndex].password = this.newPassword
        localStorage.setItem('users', JSON.stringify(users))
        alert('密码重置成功')
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.reset-password-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;

  .reset-box {
    width: 400px;
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);

    h2 {
      text-align: center;
      margin-bottom: 30px;
      color: #333;
    }

    .step-content {
      .input-group {
        margin-bottom: 20px;

        input {
          width: 100%;
          padding: 10px;
          margin-bottom: 15px;
          border: 1px solid #ddd;
          border-radius: 4px;
          box-sizing: border-box;

          &:focus {
            outline: none;
            border-color: #ee7419;
          }
        }

        .verify-code-group {
          display: flex;
          gap: 10px;

          input {
            flex: 1;
            margin-bottom: 0;
          }

          button {
            padding: 0 15px;
            white-space: nowrap;
            background: #ee7419;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;

            &:disabled {
              background: #ccc;
              cursor: not-allowed;
            }
          }
        }
      }

      .submit-btn {
        width: 100%;
        padding: 12px;
        background: #ee7419;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
          background: #d65f0a;
        }
      }
    }

    .back-to-login {
      margin-top: 20px;
      text-align: center;

      a {
        color: #ee7419;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style> 